
<template>
  <!------------------------------------ 采购中心供货信息列表 ------------------------------------
    @desc 供货信息
    @author kyle
    @date 2021-04-13
    @props
      model     ———— 商品详情数据
  -->
  <div class="mlr-20">
    <!--  -->
    <div v-for="(item,index) in list" :key="index" class="mt-20 bg-white br-12 mb-60 pb-40">
      <div class="flex-s-c ptb-28 plr-20 hb pos-r">
        <svg-icon icon-class="store-2" class="color-second fs-32 mr-10 mt--2" />
        <p class="fs-26 color-black flex-1">{{ item.PurchaseMemberName }}</p>
        <p class="tac">
          <span class="item-store-btn" @click="gotoSupplier(item.PurchaseMemberId)">进店</span>
        </p>
      </div>
      <div v-if="item.PurchaseProduct" class="plr-20">
        <div class="flex-s-c mt-24 color-gray-light fs-24 ">
          <div class="width-30 tac">价格</div>
          <div class="width-20 tac">单位</div>
          <div class="width-20 tac">库存</div>
          <div class="width-30 tac">数量</div>
        </div>
        <div class="flex-s-c mt-24 fs-28 ">
          <!-- <div class="width-20 tac" style="word-wrap:break-word">100~3234~34</div>
          <div class="width-20 tac" style="word-wrap:break-word">100~3234~34</div> -->
          <div v-if="item.PurchaseProduct.MinPrice<item.PurchaseProduct.MaxPrice" class="width-30 tac">
            <span><span class="mr--2">￥</span>{{ item.PurchaseProduct.MinPrice }}</span>
            <span><span class="mr--2"> ~ ￥</span>{{ item.PurchaseProduct.MaxPrice }}</span>
          </div>
          <div v-if="item.PurchaseProduct.MinPrice===item.PurchaseProduct.MaxPrice" class="width-30 tac">
            <span><span class="mr--2">￥</span>{{ item.PurchaseProduct.MinPrice }}</span>
          </div>
          <div class="width-20 tac">{{ item.PurchaseProduct.BaseUnit }}</div>
          <div class="width-20 tac">{{ item.PurchaseProduct.Stock }}</div>
          <div class="width-30 tac" @click="openSpec(item,index)">
            <span class="btn-minus flex-s-0 ">-</span>
            <div class="btn-input-box">
              <input v-model="item.Amount" type="number" class="btn-input">
            </div>
            <span class="btn-plus flex-s-0">+</span>
            <!-- <div class="shop-cart-in pos-r bg-primary flex-center dis-inb">
              <svg-icon icon-class="car-new" class="color-white fs-30" @goPage="openSpec(item,index)" />
              <div class="pos-a shop-cart-num">{{ item.Amount }}</div>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'PurchaseStoreList',
  components: {
  },
  props: {
    list: { // 数据
      type: Array,
      required: true,
      default: function() {
        return []
      }
    }
  },
  data() {
    return {
      samePrice: false,
      price: 0,
      oldSkus: [],
      oldMinPrice: 0,
      oldMaxPrice: 0
    }
  },
  mounted() {

  },
  methods: {
    gotoSupplier(id) {
      // this.$router.push('/purchase/StoreHome/' + id)
      this.$emit('gotoSupplier', id)
    },

    openSpec(item, index) {
      if (item.PurchaseProduct && item.PurchaseProduct.Stock <= 0) {
        this.$toast('该商户商品库存为0，不能采购！')
        return
      }
      this.$emit('openSpec', item.PurchaseMemberId, index)
    }
  }

}
</script>

<style lang="scss" scoped>
.icon-box{
  width: 32px;
  height: 32px;
  border-radius: 100%;
}
.width-10 {
  width: 10%;
  flex-shrink: 0;
}
.width-20 {
  width: 20%;
  flex-shrink: 0;
}
.width-30 {
  width: 30%;
  flex-shrink: 0;
}
.width-40 {
  width: 40%;
  flex-shrink: 0;
}
.item-store-btn{
  position: relative;
  font-size: 20px;
  line-height: 34px;
  border-radius: 17px;
  padding: 0 30px 0 20px;
  @include color-primary;
  display: inline-block;
  border: 1px solid currentColor;
  &:after{
    content: '';
    position: absolute;
    top: 8px;
    right: 15px;
    width: 10px;
    height: 10px;
    border: 2px solid ;
    border-color: currentColor currentColor transparent transparent;
    transform: rotate(45deg);

  }
}
.shop-cart-in{
  width: 40px;
  height: 40px;
  border-radius: 100%;
}
</style>
